<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/font-awesome.min.css">

    <title>Document</title>

    <style>
        html {
            height: 100%;
        }

        body {
            height: 100%;
            color: rgb(198, 202, 206)
        }

        #app {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: row;
            min-width: 700px;
            min-height: 600px;
            justify-content: center;
        }

        .title {
            width: 100%;
            height: 50px;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px;
            position: relative;
        }

        .curruser {
            position: absolute;
            right: 20px;
            bottom: 8px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .content {
            top: auto;
            height: 100%;
            width: 100%;
            flex: auto;
            flex-direction: column;
            background-color: white;
            overflow: hidden;
            box-shadow: rgba(0, 0, 0, 0.3) 1px 0px 3px;
        }

        .selectOption {
            height: 30px;
            border-radius: 10px;
        }
    </style>
</head>

<body>
<div id="app">
    <div class="content">
        <div>
            <b style="margin-top: 30px;margin-left: 10%;width: 500px;font-size:x-large;color:dimgray;">
                发布需求请填写下列信息：</b>
        </div>
        <div class="input-group mb-3" style="top: auto;left: 25%;margin-top: 30px;">
            <div class="input-group-prepend">
                <span class="input-group-text">需求名称</span>
            </div>
            <input type="text" placeholder="&emsp;请输入名称" style="height: auto;width: 300px;"
                   v-model="demand_info.item_name">
        </div>
        <div class="input-group mb-3" style="top: auto;left: 25%;border-left-style: hidden;">
            <div class="input-group-prepend">
                <span class="input-group-text">报酬金额</span>
            </div>
            <input type="number" style="height: auto;width: 380px;" placeholder="&emsp;请输入预期价位或酬劳金额"
                   v-model="demand_info.item_price">
            <div class="input-group-prepend">
                <span class="input-group-text">￥</span>
            </div>
        </div>

        <div class="input-group mb-3" style="height: 200px;width: 570px;left: 25%;">
            <div class="input-group-prepend">
                <span class="input-group-text">需求描述</span>
            </div>
            <textarea class="form-control" placeholder="请输入较为详细的需求描述,并请在此处留下您的联系方式。"
                      v-model="demand_info.item_desc"></textarea>
        </div>
        <div class="input-group mb-3" style="top: auto;left: 25%;margin-top: 30px;">
            <div class="input-group-prepend">
                <span class="input-group-text">需求图片</span>
            </div>
            <!--<input type="file" > v-model="demand_info.item_image"-->
            <span style="color:crimson;cursor: pointer;margin-left: 5px;margin-top: 4px;"
                  @click="openUploadPictureWin">点击上传图片</span>
        </div>
        <div class="input-group mb-3" style="top: auto;left: 25%;margin-top: 30px;">
            <div class="input-group-prepend">
                <span class="input-group-text">需求标签</span>
            </div>
            <label for="select1"></label><select id="select1" placeholder="&emsp;请选择商品标签" v-model="demand_info.item_label">
                <option class="selectOption">书籍</option>
                <option>衣物</option>
                <option>电子产品</option>
                <option>体育用品</option>
                <option>食品饮料</option>
                <option>美妆护肤</option>
                <option>日常其他</option>
            </select>
        </div>
        <div>
            <button type="button" class="btn btn-outline-info" @click='submit'
                    style="margin-top: 5px;margin-left:75%;">提交
            </button>
        </div>
    </div>

    <!--<input v-show="false" type="file" ref="fileInput" @change="handleFile"/>-->
    <div id="upload-picture" style="display: none;padding:10px;">

        <div @click="choosePicture">

            <div v-if="currentFile"
                 style="width:300px;height:300px;display:flex;flex-direction: column;align-items: center;justify-content: center;">
                <img :src="currentImgUrl" style="max-width:100%;max-height: 100%;"/>
            </div>

            <div v-else
                 style="width:300px;height:300px;display:flex;flex-direction: column;align-items: center;justify-content: center;border:1px dashed #AAAAAA;">
                <i class="fa fa-plus fa-3x" style="color:#AAAAAA;"></i>
                <div style="font-size:26px;">上传图片</div>
            </div>


        </div>

        <button :disabled="currentFile==null" class="btn btn-primary btn-lg" style="width:100%;margin-top:10px;"
                @click="uploadPicture">提交图片
        </button>

    </div>
    <input v-show="false" type="file" ref="fileInput" @change="handleFile"/>

</div>


<script src="../js/jquery-3.6.0.slim.min.js"></script>
<script src="../js/bootstrap.bundle.min.js"></script>
<script src="../js/vue.global.js"></script>
<script src="../js/axios.min.js"></script>
<script src="../js/request.js"></script>
<script src="../js/my-axios.js"></script>
<script src="../layer/layer.js"></script>

<script>
    const app = {
        data() {
            return {
                navWidth: 180,
                demand_info: {
                    user_id: 0,
                    item_id: 0,
                    item_name: '',
                    item_price: '',
                    item_desc: '',
                    item_image: 'sss',
                    item_label: '',
                    upload: 1,
                    collect: false,
                    time: null,

                },
                currentFile: null,
                currentImgUrl: null
            }
        },
        methods: {
            switchNavWidth() {
                this.navWidth = this.navWidth == 180 ? 0 : 180
            },
            getUserId: function () {
                return parseInt(sessionStorage.getItem("u_id"));
                //return 0;
            },
            getItemId: function () {
                return 0;
            },
            getNowFormatDate: function () {
                let date = new Date();
                let separator = "-";
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let strDate = date.getDate();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                return year + separator + month + separator + strDate;
            },
            openUploadPictureWin() {
                layer.open({
                    type: 1,
                    title: false,
                    content: $('#upload-picture')
                });
            },
            choosePicture() {
                this.$refs.fileInput.click();//通过程序点击文件框

            },
            handleFile() {
                this.currentFile = this.$refs.fileInput.files[0];//获得选中的图片文件


                let fileReader = new FileReader();
                fileReader.onload = () => {//读取文件完成事件
                    this.currentImgUrl = fileReader.result;//将加载结果（将文件转变为可访问的url）赋值与currentImgUrl
                };
                fileReader.readAsDataURL(this.currentFile);//读取文件并转化为url
            },


            uploadPicture() {
                let idx = layer.load();
                let formData = new FormData();
                formData.append("picture", this.currentFile);
                console.log(1);
                myAxios.post("/picture", formData).then(res => {
                    layer.close(idx);
                    if (res.data.success) {
                        layer.msg('上传成功！', {icon: 1});
                        this.currentFile = null;
                        this.currentImgUrl = null;
                    } else {
                        layer.msg(res.data.message, {icon: 2});
                    }
                }).catch(err => {
                    layer.close(idx);
                })

            },
            submit() {
                this.demand_info.user_id = this.$options.methods.getUserId();
                this.demand_info.item_id = this.$options.methods.getItemId();
                //this.item_image = this.$options.methods.changeImageToUrl();
                this.demand_info.time = this.$options.methods.getNowFormatDate();
                myAxios.post('/Demands_info', this.demand_info);
                layer.msg('提交成功！',{icon: 1})
            },

        },
        created() {

        }
    };
    Vue.createApp(app).mount('#app')
</script>
</body>

</html>